<template>
    <div class="content">
        <h3>欢迎进入桐花中路私立协济医院</h3>
        <input type="text" v-model="username"> <br>
        <p v-text="username"></p>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

//在vue包中引入reactive函数和toRef函数
//reactive可以将一个普通角色对象,生成一个响应式动态数据类型,由vm 监听
//toRef函数可以,将js对象中的属性替换成响应式引用
export default {
    setup() {
        const data = reactive({
            username: 'xavier',
            age:0
        })
        return {
            ...toRefs(data)
        }
    }

}
</script>

<style>
    .content{
        box-sizing: border-box;
        padding: 10px;
    }
    input{
        height: 30px;
        width: 160px;
        border:1px solid black;
        border-radius: 5px;
    }

</style>